import { OnInit, OnChanges, Component, SimpleChanges, ChangeDetectionStrategy, Input } from '@angular/core';

@Component({
  selector: 'app-music-slider-handle',
  template: `<div class="music-slider-handle" [ngStyle]="handleStyle"></div>`,
  styleUrls: ['./music-slider.component.less'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MusicSliderHandleComponent implements OnInit, OnChanges {

  @Input('vertical')
  isVertical = false;

  @Input()
  offset: number;

  handleStyle: any = {};

  ngOnInit(): void {

  }

  ngOnChanges(changes: SimpleChanges): void {
    const offsetChange = changes['offset'];
    if (offsetChange) {
      this.handleStyle[this.isVertical ? 'bottom' : 'left'] = `${this.offset}%`;
    }
  }

}
